<template>
  <div v-loading="loading" class="edit-language">
    <div class="head">
      <span class="text">
        {{ $t('user.components.3541a838cb4f518e91d5b8f91c672b12') }}
      </span>
    </div>

    <div class="lang-box">
      <div class="tip">
        {{ $t('user.components.a71f7d56ac169d58aa4db8c950cb4f5e') }}
      </div>
      <div>{{ $t('user.components.410e15142a550f9e94809ec45c4693e1') }}</div>
      <div class="active">
        {{ lang | langName }}
        <i class="el-icon-check" />
      </div>
      <div>{{ $t('user.components.35a554e513729eca62e8b5c746232877') }}</div>
      <div class="list-box">
        <div
          v-for="(item, index) in langs"
          :key="index"
          class="lang-list"
          :class="{active:activeIndex==index}"
          @click="switchLang(item,index)">
          {{ item.languagePackName | langName }}
          <i v-if="activeIndex==index" class="el-icon-check" />
        </div>
      </div>

      <el-button type="primary" class="save" @click="saveHandle">
        {{ $t('user.components.3dcbfab9a0db1e2531ab8dbeae216eb5') }}
      </el-button>
    </div>
  </div>
</template>

<script>
import {
  adminUsersSetDeflautLanguageAPI
} from '@/api/user/personCenter'
import { mapGetters } from 'vuex'
import { langName } from '@/views/admin/language/components/languages'
import { Loading } from 'element-ui'
export default {
  filters: {
    langName
  },
  data() {
    return {
      loading: false,
      activeIndex: 0,
      currentData: null
    }
  },
  computed: {
    ...mapGetters(['langs', 'lang'])
  },
  mounted() {
    this.langs.forEach((item, index) => {
      if (item.languagePackName == this.lang) {
        this.activeIndex = index
        this.currentData = item
      }
    })
  },
  methods: {
    switchLang(data, index) {
      this.activeIndex = index
      this.currentData = data
    },
    saveHandle() {
      const loading = Loading.service({
        target: document.getElementById('#app')
      })
      adminUsersSetDeflautLanguageAPI({
        languagePackId: this.currentData.languagePackId
      })
        .then(res => {
          this.$store.dispatch('GetDefaultLang').then(res => {
            loading.close()
            window.location.reload()
          }).catch(() => {})
        })
        .catch(() => {
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./style";

.edit-language {
  width: 100%;
  padding: 22px 25px 60px;
  background-color: white;
}

.lang-box {
  margin-top: 20px;
  color: $--color-n200;

  .tip {
    margin-top: 10px;
    margin-bottom: 20px;
  }
}

.active {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 380px;
  height: 30px;
  padding: 0 10px;
  margin: 10px 0 20px;
  border: 1px solid $--color-b400;
  border-radius: 4px;

  .el-icon-check {
    color: $--color-b400;
  }
}

.list-box {
  width: 390px;
  max-height: 260px;
  overflow-y: auto;

  .lang-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 380px;
    height: 30px;
    padding: 0 10px;
    margin: 10px 0 20px;
    margin-top: 10px;
    border-radius: 4px;

    &:hover {
      cursor: pointer;
      background-color: #f1f5f8;
    }
  }
}

.save {
  width: 380px;
}
</style>
